<template>
    <h1>{{ msg }}</h1>

    <h3>子组件</h3>
    <p>标题: {{ title }}</p>
    <p>计数: {{ count }}</p>
    <p>是否激活: {{ isActive }}</p>


</template>

<!-- <script setup lang="ts">
import { ref } from 'vue'

// 定义 props 类型
interface Props {
    title: string;           // 必传字符串
    count: number;          // 可选数字，默认值为0
    isActive: boolean;       // 必传布尔值
}
const props = withDefaults(defineProps<Props>(), {
    count: 0
});

// defineProps<{ msg: string }>()

const count = ref(0)
const change = (a: string) => {
    console.log('触发了666666',a);

}
defineExpose({
    change
})
</script> -->

<script lang="ts">
export default {
    props: {
        title: {
            type: String,
            required: true
        },
        count: {
            type: Number,
            default: 0
        },
        isActive: {
            type: Boolean,
            required: true
        }
    },
    data() {
        return {
            internalCount: 0
        };
    },
    computed: {
        msg(): string {
            return 'Hello Vue 2 + TypeScript';
        }
    },
    methods: {
        change(a:string) {
            console.log('触发了666666',a);

        }
    }
}
</script>

<style scoped>
.read-the-docs {
    color: #888;
}
</style>
